<script setup>
import {onMounted, ref} from "vue";
import {Line} from "@antv/g2plot";
import axios from "axios";

const data = ref([])

const loadData = async () => {
  await axios({
    method: "get",
    url: "http://127.0.0.1:8888/zdppy_amg2plot_line"
  }).then(resp => {
    if (resp.data && resp.data.data && resp.data.data.results) {
      data.value = resp.data.data.results
    }
  })
}

onMounted(async () => {
  await loadData()
  const line = new Line('container', {
    data: data.value,
    xField: 'year',
    yField: 'value',
    yAxis: {
      // 格式化 y 轴标签加单位，自定义 labal 样式
      label: {
        formatter: (v) => {
          return v + 'k';
        }
      },
    },
  });

  line.render();
})
</script>

<template>
  <div id="container"></div>
</template>

<style scoped>

</style>